import React from 'react';

import {
  Image,
  TouchableOpacity,
} from 'react-native';

import { StackNavigator, TabNavigator } from 'react-navigation';

import Home from './screens/Home';
import QRCodeScan from './screens/HomePages/QRCodeScan';

import Profile from './screens/Profile';
import Login from './screens/Login';
import Register from './screens/Register';

import Work from './screens/Work'
import IDCard from './screens/workPages/IDCard'
import MessageList from './screens/HomePages/MessageList'
import ExpendPage from './screens/workPages/ExpendPage'
import Recommend from './screens/SetPages/Recommend'

import ExpendDetail from './screens/workPages/ExpendDetail'

import Input from './screens/workPages/Input'
import Suggection from './screens/SetPages/Suggection'
import Icon from 'react-native-vector-icons/Ionicons'


//自定义导航栏

const StackOptions = ({ navigation }) => {

  let { state, goBack } = navigation;

  // 用来判断是否隐藏或显示header
  const visible = state.params.isVisible;
  let header;
  if (visible === true) {
    header = null;
  }
  //borderBottomColor 底部线的颜色
  const headerStyle = { backgroundColor: 'rgba(0,171,236,1)',borderBottomColor:'transparent'};
  const headerTitle = state.params.title;
  const headerTitleStyle = { fontSize: 20, color: 'white', fontWeight: '500' }
  const headerBackTitle = false;
  const headerLeft = (

    <TouchableOpacity activeOpacity={1} style={{width:45,height:30,}}
    onPress={() => { goBack()}}
    >
      <Icon
        name='ios-arrow-back'
        size={30}
        color='white'
        style={{ marginLeft: 13 }}
      />
    </TouchableOpacity>



  );
  return { headerStyle, headerTitle, headerTitleStyle, headerBackTitle, headerLeft, header }
};

const Main = TabNavigator({
  //每一个页面的配置
  Home: {
    screen: Home,
  },
  Work: {
    screen: Work,
    navigationOptions: {
      gestureResponseDistance: { horizontal: 300 },
      headerStyle: { maxHeight: 0, },
      tabBarLabel: '工作',
      tabBarIcon: ({ tintColor }) => (
        <Image
          source={require('../images/ic_work.png')}
          style={[{ height: 24, width: 24 }, { tintColor: tintColor }]}
        />
      ),
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      headerTitle: '我的',
      gestureResponseDistance: { horizontal: 300 },
      headerBackTitle: null,
      headerStyle: { backgroundColor: 'rgba(0,171,236,1)' },//导航栏的样式
      headerTitleStyle: {//导航栏文字的样式
        color: 'white',
        //设置标题的大小
        fontSize: 20,
        //居中显示
        alignSelf: 'center',
      },
      tabBarLabel: '我的',
      tabBarIcon: ({ tintColor }) => (
        <Image
          source={require('../images/ic_mine.png')}
          style={[{ height: 24, width: 24 }, { tintColor: tintColor }]}
        />
      ),
    }
  },
}, {
    //设置TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改标签时显示动画
    animationEnabled: false,
    //是否允许在标签之间进行滑动
    swipeEnabled: false,
    //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    backBehavior: "none",
    //设置Tab标签的属性
    tabBarOptions: {
      //Android属性
      upperCaseLabel: false,//是否使标签大写，默认为true
      //共有属性
      showIcon: true,//是否显示图标，默认关闭
      showLabel: true,//是否显示label，默认开启
      activeTintColor: 'rgba(0,171,236,1)',//label和icon的前景色 活跃状态下（选中）
      inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
      style: { //TabNavigator 的背景颜色
        backgroundColor: 'white',
        height: 55,
      },
      indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
        height: 0,
      },
      labelStyle: {//文字的样式
        fontSize: 13,
        marginTop: -5,
        marginBottom: 5,
      },
      iconStyle: {//图标的样式
        marginBottom: 5,
      }
    },
  });

export default function configAppNavigator(isLoggedIn) {
  return StackNavigator({
    Login: {
      screen: Login,
      navigationOptions:{
        headerStyle: { backgroundColor: 'rgba(0,171,236,1)' },//导航栏的样式
        headerTitle:'登录',
        headerTitleStyle: {//导航栏文字的样式
          color: 'white',
          //设置标题的大小
          fontSize: 20,
          //居中显示
          alignSelf: 'center',
        },
      }
    },
    Main: {
      screen: Main
    },
    Recommend: {
      screen: Recommend,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    Register: {
      screen: Register,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    IDCard: {
      screen: IDCard,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    ExpendPage: {
      screen: ExpendPage,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })

    },
    ExpendDetail: {
      screen: ExpendDetail,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    Input: {
      screen: Input,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    Suggection: {
      screen: Suggection,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    MessageList: {
      screen: MessageList,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
    QRCodeScan: {
      screen: QRCodeScan,
      navigationOptions: ({ navigation }) => StackOptions({ navigation })
    },
  },

    {
      initialRouteName: isLoggedIn ? 'Main' : 'Login'
    });
};
